<template>
	<view>
		<view class="plate-list">
			<view class="plate-item">
				<view class="plate-icon">
					<u--image :src="plate_info.section_icon" width="80px" height="80px" shape="square" radius="10"></u--image>
				</view>
				<view class="plate-info">
					<view class="plate-name">{{ plate_info.section_name }}</view>
					<view class="plate-section">
						<view class="plate_user">
							<u-avatar size="20" v-for="(item, index) in plate_info.forum_section" :key="index" :src="item.usertx"></u-avatar>
						</view>
						<view class="plate_number">
							<view style="margin-right: 10upx;">帖子总量 {{ plate_info.postnum }}</view>
							<view style="margin-right: 10upx;">浏览总量 {{ plate_info.viewnum }}</view>
							<view>评论总量 {{ plate_info.commentnum }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="plate-desc">板块介绍 : {{ plate_info.section_description }}</view>
		</view>
		<!-- 公告 -->
		<view class="announcement-class" v-if="section_announcement != ''">
			<u-notice-bar :text="section_announcement" color="#ffffff" bgColor="#5AC725"></u-notice-bar>
		</view>
		<!-- 帖子列表 -->
		<post-list :list="post_list"></post-list>
		<u-loadmore v-if="post_list.length != 0" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" style="padding-bottom: 20upx;" />
		<u-empty mode="data" v-if="post_list.length == 0"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			plate_id: '',
			plate_info: {},
			section_announcement: '',
			post_list: [],
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈'
		}
	},
	onLoad(options) {
		this.plate_id = options.section_id;
		this.get_section_information(options.section_id);
		this.get_posts_list();
	},
	onReachBottom() {
		this.get_posts_list();
		this.status = 'loading';
	},
	onPullDownRefresh() {
		this.post_list = [];
		this.formData = {
			limit: 10,  //每页10条数据
			page: 1,   //第几页
		};
		//调用获取数据方法
		this.get_posts_list(this.plate_id)
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		async get_section_information(id) {
			let get_section_information = await this.$api.get_section_information({ sectionid: id });
			if (get_section_information.code == 1) {
				this.plate_info = get_section_information.data;
				uni.setNavigationBarTitle({
					title: get_section_information.data.section_name
				});
				this.section_announcement = get_section_information.data.section_announcement;
			}
		},
		// 获取帖子列表
		async get_posts_list() {
			this.formData.sectionid = this.plate_id;
			this.formData.sort = 'update_time,score';
			this.formData.sortOrder = 'desc';
			let get_posts_list = await this.$api.get_posts_list(this.formData);
			if (get_posts_list.code == 1) {
				if (this.formData.page > get_posts_list.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.post_list = this.post_list.concat(get_posts_list.data.list);
					if (this.formData.page == get_posts_list.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #F9F9F9;
}

.plate-list {
	padding: 40upx;
	padding-top: 0;
	background-color: #fff;
	border-bottom: 1px solid #f8f8f8;

	.plate-item {
		display: flex;
		align-items: center;
		padding-top: 20upx;

		.plate-icon {
			margin-right: 30upx;
		}

		.plate-info {
			flex: 1;

			.plate-name {
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 10upx;
			}

			.plate-section {
				display: flex;
				flex-direction: column;
				font-size: 24upx;
				color: #909399;
				margin-top: 20upx;

				.plate_user {
					display: flex;
					margin-bottom: 10upx;

					.u-avatar {
						margin-right: 10upx;
					}
				}

				.plate_number {
					display: flex;
				}
			}
		}
	}

	.plate-desc {
		font-size: 24upx;
		color: #909399;
		margin-top: 25upx;
	}
}

.announcement-class {
	background-color: #5AC725;
	margin: 10px;
	border-radius: 10px;
	padding: 0 10px;
}
</style>
